<template>
    <el-form label-position="top" :rules="rules" ref="form" :model="form" class="padding-b">
      <el-form-item :label="label" prop="value">
        <el-checkbox-group v-model="form.value" @change="blur">
          <el-checkbox :label="option.key" v-for="option in options" :disabled="disabled">{{option.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
</template>
<script>
  import {getDicFromField} from '@/utils/workflowUtils'
  export default {
    name: 'BCheckbox',
    props: {
      span: Number,
      label: String,
      default: {type: Array},
      id: String,
      disabled: {type: String | Boolean, default: false},
      dic: '',
      require: String,
      random: {type: Number, default: 0},
      field: {type: Object, default: function () { return {} }}
    },
    data () {
      return {
        loading: true,
        form: {
          value: []
        },
        rules: {
          value: [
            {type: 'array', required: this.require === 'required', message: this.$t('validate.required'), trigger: 'change'}
          ]
        }
      }
    },
    computed: {
      options () {
        let dic = getDicFromField(this.field, this.$getCache('custTmpls'), this.$getCache('options')) || {}
        return dic.options || []
      }
    },
    watch: {
    },
    methods: {
      submit (noCheck) {
        // noCheck为true 不进行校验
        let obj = {}
        if (noCheck) {
          obj.success = true
        } else {
          this.$refs.form.validate((valid) => {
            obj.success = valid
          })
        }
        this.$refs.form.validate((valid) => {
          obj.success = valid
        })
        if (obj.success) {
          obj.data = {[this.id]: this.form.value}
        }
        return obj
      },
      blur () {
        this.$emit('blurEvent', this.submit(true))
      }
    },
    mounted () {
      let data = this.default || []
      this.form.value = data.filter((item) => item)
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl";
  .padding-b
    padding-bottom $padding5
</style>
